import React, {Component} from 'react';
import {Card, Table, Button, message,Modal} from "antd";
import LinkButton from "../../components/link-button";
import {reqCategorys,reqAddCategory,reqUpdateCategory} from "../../api/index"
import {ArrowRightOutlined} from "@ant-design/icons";
import AddForm from "./addForm";
import UpdateForm from "./updateForm";
import PropTypes from 'prop-types'
class Category extends Component {

    state = {
        loading: false,
        categorys: [],
        subCategorys: [],
        parentId: '0',
        parentName: '',
        showStatus: 0 //对话框时候显示

    }
    initColumns = () => {
        this.columns = [
            {
                title: '分类的名称',
                dataIndex: 'name',
            },
            {
                title: '操作',
                width: 300,
                dataIndex: '',
                key: 'x',
                render: (category) => (
                    <>
                        <LinkButton onClick={() => this.showUpdateCategorys(category)}>修改分类</LinkButton>
                        {this.state.parentId === '0' ?
                            <LinkButton onClick={() => this.showSubCategorys(category)}>查看子分类</LinkButton> : null}
                    </>
                )
            },
        ];
    }
    showSubCategorys = (category) => {
        this.setState({
            parentId: category._id,
            parentName: category.name
        }, () => {
            this.getCategorys()
        })
    }

    componentWillMount() {
        this.initColumns()
    }

    //获取一级或者二级分类列表
    getCategorys = async (parentId) => {
        this.setState({loading: true})
        parentId = parentId || this.state.parentId
        const result = await reqCategorys(parentId)
        this.setState({loading: false})
        if (result.status === 0) {
            const categorys = result.data
            if (parentId === '0') {
                this.setState({
                    categorys
                })
            } else {
                this.setState({
                    subCategorys: categorys
                })
            }

        } else {
            message.error("获取分类列表失败")
        }
    }

    componentDidMount() {
        const result = this.getCategorys()
    }

    showFirstCategorys = () => {
        this.setState({
            subCategorys: [],
            parentId: '0',
            parentName: ''
        })
    }
    //关闭对话框
    handleCancel = () => {
        this.setState({
            showStatus: 0
        })
    }
    //添加类别
    addCategory = async () => {
        const {parentId, categoryName} = this.form
        if(parentId && categoryName){
            this.setState(
                {
                    showStatus:0
                }
            )

            const res = await reqAddCategory(parentId, categoryName)
            if(res.status===0){
                if (parentId===this.state.parentId){
                    this.getCategorys()
                }  else if(parentId==='0'){
                    this.getCategorys('0')
                }
            }
        }
    }
    //更新类别
    updateCategory = async () => {
        const categoryName = this.form
        if(this.form){
            this.setState(
                {
                    showStatus:0
                }
            )
            const categoryId = this.category._id

            const res = await reqUpdateCategory({categoryId,categoryName})
            if(res.status===0){
                this.getCategorys()
            }
        }
    }
    showAddCategory = () => {
        this.setState({
            showStatus: 1
        })
    }
    showUpdateCategorys = (category) => {
        this.category = category
        this.setState({
            showStatus: 2
        })
    }

    render() {
        const category = this.category || {}
        const extra = (
            <Button type='primary' onClick={this.showAddCategory}>
                添加
            </Button>
        )
        const {parentId, parentName, categorys, subCategorys, showStatus} = this.state
        const title = parentId === '0' ? "一级分类列表" : (
            <span>
                <LinkButton onClick={this.showFirstCategorys}>一级分类列表</LinkButton>
                <ArrowRightOutlined/>
                <span>{parentName}</span>
            </span>
        )
        return (
            <>
                <Card title={title} extra={extra}>
                    <Table dataSource={parentId === '0' ? categorys : subCategorys}
                           columns={this.columns}
                           rowKey='_id'
                           bordered
                           pagination={{pageSize: 5}}
                           loading={this.state.loading}
                    />
                </Card>

                <Modal title="添加分类" visible={showStatus === 1} onOk={this.addCategory} onCancel={this.handleCancel}>
                    <AddForm
                        parentId={parentId}
                        categorys={categorys}
                        setForm = {(form)=>{this.form=form}}>
                    ></AddForm>
                </Modal>
                <Modal title="更新分类" visible={showStatus === 2} onOk={this.updateCategory} onCancel={this.handleCancel}>
                    <UpdateForm
                        categoryName={category.name}
                        setForm = {(form)=>{this.form=form}}>
                    </UpdateForm>
                </Modal>
            </>
        );
    }
}

export default Category;